import React, { useState, useEffect } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Loader2, GitCommitHorizontal } from 'lucide-react';
import { ConductorSpecAPI } from '@/api/ConductorSpec';

export default function ConductorInfoCard({ conductorSpecId }) {
  const [conductorSpecData, setConductorSpecData] = useState(null);
  const [isLoadingSpec, setIsLoadingSpec] = useState(true);

  useEffect(() => {
    const loadConductorSpec = async () => {
      try {
        if (conductorSpecId) {
          const spec = await ConductorSpecAPI.get(conductorSpecId);
          setConductorSpecData(spec.data);
        }
      } catch (error) {
        console.error('加载导线规格失败:', error);
      } finally {
        setIsLoadingSpec(false);
      }
    };
    loadConductorSpec();
  }, [conductorSpecId]);

  if (isLoadingSpec) {
    return (
      <div className="flex items-center gap-2 text-gray-500">
        <Loader2 className="w-4 h-4 animate-spin" />
        <span className="text-sm">加载导线信息...</span>
      </div>
    );
  }

  if (!conductorSpecData) {
    return (
      <div className="text-sm text-gray-500">
        未找到导线规格信息
      </div>
    );
  }

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
      <div>
        <span className="text-xs text-gray-600">导线型号:</span>
        <div className="font-semibold text-gray-900 text-lg">
          {conductorSpecData.model || '-'}
        </div>
      </div>
      <div>
        <span className="text-xs text-gray-600">导线类型:</span>
        <div className="font-medium text-gray-900">
          {conductorSpecData.type || '-'}
        </div>
      </div>
      <div>
        <span className="text-xs text-gray-600">外径:</span>
        <div className="font-medium text-gray-900">
          {conductorSpecData.outer_diameter_mm ? `${conductorSpecData.outer_diameter_mm} mm` : '-'}
        </div>
      </div>
      <div>
        <span className="text-xs text-gray-600">单位重量:</span>
        <div className="font-medium text-gray-900">
          {conductorSpecData.weight_per_meter_N_per_m ? `${conductorSpecData.weight_per_meter_N_per_m.toFixed(2)} N/m` : '-'}
        </div>
      </div>
      <div>
        <span className="text-xs text-gray-600">截面积:</span>
        <div className="font-medium text-gray-900">
          {conductorSpecData.cross_sectional_area_mm2 ? `${conductorSpecData.cross_sectional_area_mm2} mm²` : '-'}
        </div>
      </div>
      <div>
        <span className="text-xs text-gray-600">破断力:</span>
        <div className="font-medium text-gray-900">
          {conductorSpecData.breaking_force_kN ? `${conductorSpecData.breaking_force_kN} kN` : '-'}
        </div>
      </div>
      <div>
        <span className="text-xs text-gray-600">弹性模量:</span>
        <div className="font-medium text-gray-900">
          {conductorSpecData.elastic_modulus_MPa ? `${conductorSpecData.elastic_modulus_MPa} MPa` : '-'}
        </div>
      </div>
      <div>
        <span className="text-xs text-gray-600">线膨胀系数:</span>
        <div className="font-medium text-gray-900">
          {conductorSpecData.thermal_expansion_coeff_per_C ? `${conductorSpecData.thermal_expansion_coeff_per_C} /°C` : '-'}
        </div>
      </div>
    </div>
  );
}